/** 
* 最近更新：2018/12/13
* 作者：wangyr
* 功能：自定义指令学习 
*/
<template>
  <div style="margin:20px;" v-cloak>
    <h1 class="titleCenter">自定义指令</h1>
    <el-input v-focus></el-input>
    <div v-test="{msg:'hello',name:'Aresn'}"></div>
    <br />

    <div v-customDirective:msg.a.b="message"></div>
    <br />
    <hr />

    <h2 class="titleCenter">点击下拉框内容关闭</h2>
    <div class="main" v-clickoutside="handleClose">
      <el-button @click="show=!show" type="success">点击显示下拉菜单</el-button>
      <div class="dropdown" v-show="show">
        <p>下拉框的内容，点击外面区域可关闭</p>
      </div>
    </div>
  </div>
</template>

<script>
/* 把全局注册的自自定义指令引入 */
// import directive from '../../common/js/directive'
export default {
  name: 'focus',
  /* 局部注册 */
  directives: {
    /* 自定义指令名字 */

  },

  /* 局部自定义指令 */
  directives: {
    customDirective: {
      bind (el, binding, vnode) {
        var keys = []
        for (var i in vnode) {
          keys.push(i)
          // console.log(keys)
        }
        //这里使用es6中的模板语法代替''+''
        el.innerHTML = `name: ${binding.name}<h3>binding.name指令名字</h3> <br> 
        value: ${binding.value} <h3>binding.value指令绑定的默认数据</h3>   <br> 
        expression: ${binding.expression}  <h3>binding.expression指令绑定值的字符串形式</h3><br>
        argument:${binding.arg} <h3>binding.arg传给指令的参数</h3> <br> 
        modifiers:${JSON.stringify(binding.modifiers)} <h3>binding.modifiers一个包含修饰符的对象</h3> <br> 
        vnode keys:keys.join(',') <h3>Vue编译生成的虚拟节点</h3>`
        //指令名字
      }
    },
    test: {
      bind (el, binding, vnode) {
        // console.log(binding.value.msg) //hello
        // console.log(binding.value.name) // Aresn
        // console.log(binding)
      }
    },
    //外部点击不显示
    clickoutside: {
      bind (el, binding, vnode) {
        function documentHandler (e) {
          // console.log(e) 点击document的元素
          // console.log(el) //绑定的元素
          if (el.contains(e.target)) {
            return false //如果el元素中包含e.target 返回true retrun 不继续执行
          }
          if (binding.expression) {
            /* 用来检测自定义指令绑定的表表达式是否写了，表达式应该是一个函数，点击外部任何区域都应该执行此函数 */

            binding.value(e) //这里也是就是执行methods中指定的函数handleClose
          }
        }
        el._vueClickOutside_ = documentHandler //在自定义指令中不能用this.documentHandler 所以用了el._vueClickOutside_引用了documentHandler
        document.addEventListener('click', documentHandler)
      },
      unbind (el, binding) {
        document.removeEventListener('click', el._vueClickOutside_)
        delete el._vueClickOutside_
      }
    },
    // 自动聚焦
    focus: {
      /*钩子函数 */
      bind (el) {
        console.log(el)
        // 如果用的是input 直接el.focus(),因为el-input 是封装好的外部是el-input直接el.focus()是作用在el-input的
        el.querySelector("input").focus()
      },
      inserted (el) {
        el.querySelector("input").focus()
      }
    }
  },
  data () {
    return {
      show: false,
      message: '默认文本'
    }
  },
  methods: {
    handleClose () {
      this.show = false
    }
  }
}
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.main {
  width: 150px;
}
.el-button {
  display: block;
  width: 100%;
  color: #fff;
  cursor: pointer;
  position: relative;
}
.el-button:active {
  top: 1px;
  left: 1px;
}
.dropdown {
  width: 100%;
  height: 125px;
  margin: 5px 0;
  background-color: aqua;
}
.dropdown p {
  width: 100%;
}
</style>
